<template>
    <div class="zh-table">
        <div class="zh-table-open clear">
            <div class="zh-open-left fl">
                <div class="open-width" style="width: 270px">
                    <el-input v-model="listParam.keyword" placeholder="请输入设备名搜索"></el-input>
                </div>
                <el-button type="primary" @click="searchFunc" >搜索</el-button>
            </div>
            <div class="zh-open-right fr">
                <el-button type="primary"  @click="">新增</el-button>
                <el-button type="danger"  @click="deleteMuilt_confirm">批量删除</el-button>
            </div>
        </div>
        <div class="zh-table-contents">
            <el-table
                :data="listData"
                border
                @selection-change="tableSelectionChange"
                max-height="600"
                style="width: 100%">
                <el-table-column
                    type="selection"
                    width="50"
                    align="center"
                    fixed>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="设备名"
                    align="center"
                    show-overflow-tooltip
                    >
                </el-table-column>
                <el-table-column
                    prop=""
                    label="类型"
                    align="center"
                    show-overflow-tooltip
                    >
                    <template slot-scope="scope">
                        <div v-html="getType(scope.row.type)"></div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="class_name"
                    label="所属教室"
                    align="center"
                    show-overflow-tooltip
                    >
                </el-table-column>
                <el-table-column
                    prop="ip"
                    label="IP"
                    align="center"
                    show-overflow-tooltip
                    >
                </el-table-column>
                <el-table-column
                    prop="mac"
                    label="网络地址"
                    align="center"
                    show-overflow-tooltip
                    >
                </el-table-column>
                <el-table-column
                    prop="comment"
                    label="注释"
                    align="center"
                    show-overflow-tooltip
                    >
                </el-table-column>
                <el-table-column
                    prop=""
                    label="状态"
                    align="center"
                    show-overflow-tooltip
                    >
                    <template slot-scope="scope">
                        <div v-html="getStatus(scope.row.status)">{{scope.row.loading}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop=""
                    label="操作"
                    align="center"
                    width="200"
                    show-overflow-tooltip
                    >
                    <template slot-scope="scope">
                        <template v-if="parseInt(scope.row.status) === 1">
                            <el-button @click="delete_confirm(scope.row)" type="text" class="delete-button">预览</el-button>
                        </template>
                        <el-button @click="delete_confirm(scope.row)" type="text" class="delete-button">删除</el-button>
                    </template>

                </el-table-column>
            </el-table>
            <div class="table-pagination" v-if="total_number > 10">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="listParam.page_index"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="listParam.page_size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total_number">
                </el-pagination>
                <div class="pagination-button">
                    <el-button 
                        @click="getList"
                        type="primary" icon="el-icon-refresh" 
                        circle title="刷新数据" size="mini" >
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                rowLen: 0,
                isActive: true,
                listData:[],
                listParam:{
                    keyword: '',
                    index:2,
                    page_index:1,
                    page_size:10,
                },
                total_number:0,
                selected:[],
                typeArr:{0:'0620',1:'0600B',2:'0650',3:'rtmp',4:'rtsp',5:'奥威亚',6:'网动',7:'中庆',8:'锐取',9:'0683',10:'0660'},
                statusArr:{1:'启用',2:'停用'},
                videoOptions: {
                    loop: false,
                    height: '360',
                    sources: [{
                    type: "rtmp/mp4",
                    src: "blabla"
                    }],
                    techOrder: ['flash'],
                    autoplay: true,
                    controls: true,
                    poster: "",
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: false,
                        fullscreenToggle: true  //全屏按钮
                    }
                },
            }
        },
        created(){
            this.getList();
        },
        watch:{
            
        },
        methods: {
            searchFunc(){
                this.listParam.page_index = 1;
                this.getList();
            },
            getType(val){
                return this.typeArr[parseInt(val)];
            },
            getStatus(val){
                return this.statusArr[parseInt(val)];
            },
            //选中
            tableSelectionChange(val) {
                this.selected = val;
            },
            getList(){
                let success = (data=>{
                    this.stayLoadingInx = [];
                    this.listData = data.data.data;
                    this.total_number = data.data.data_sum;
                })
                //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                this.$ajax.get('api/recorder/recorder_list',{params: this.listParam,func:{success:success}})
            },
            delete(id){
                let success = ( data => {
                    this.$message.success(data.msg);

                    if (this.listData.length - this.rowLen === 0) {
						if (this.listParam.page_index > 1) {
							this.listParam.page_index-- ;
						} else {
							this.listParam.page_index = 1;
						}
                    }
                    
                    this.getList();
                });
                this.$ajax.delete('api/video/video_cut',{params:{id:id},func:{success:success}})
            },
            delete_confirm(obj){
                let yes = ( data => {
                    this.rowLen = 1;
                    this.delete(obj.cut_id);
                })
                let cancel = ( data => {})
                this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 '+obj.name+' 删除吗？'});

            },
            deleteMuilt_confirm(){
                if( this.selected.length === 0 ) {
                    this.$message.warning("请选择要删除的项");
                    return false;
                }
                let yes = ( data => {
                    this.rowLen = this.selected.length ;
                    this.muilDelete();
                })
                let cancel = ( data => {})
                this.e_confirm({yes:yes,cancel:cancel,txt:'确定要删除选中的项吗？'});

            },
            muilDelete(){
                var ids = [];
                for (var i = this.selected.length - 1; i >= 0; i--) {
                    ids.push(this.selected[i].cut_id)
                }
                this.delete(ids);
            },
                handleSizeChange(val) {
                this.listParam.page_index = 1;
                this.listParam.page_size = val;
                this.getList()
            },
            handleCurrentChange(val) {
                this.listParam.page_index = val;
                this.getList();
            },
        },
    }
</script>